<template>
  <div class="warning-num">
    <el-radio-group v-model="type" size="small" class="received-radio" @change="initEcharts">
      <el-radio-button label="年">年</el-radio-button>
      <el-radio-button label="月">月</el-radio-button>
      <el-radio-button label="日">日</el-radio-button>
    </el-radio-group>
    <div id="warning_num_echarts" style="height: 100%;"></div>
  </div>
</template>
<script>
    // import dxWrap from '@/components/customComponents/dxWrap.component.vue'
    import API from "@/api/index.api";
    export default {
        components: {
          // dxWrap
        },
        data () {
          return {
            type: '月',
            num: 20 ,
            myChart: null,
          }
        },
        methods: {
          async initEcharts () {
            const isScreen1920 = window.innerWidth <= 1920
            let res = await API.getWarnNum({type: this.type})
            let data = res.content || []

            let echarts = this.$echarts;
            const option = {
              title: {
                text: '预警量',
                top: 10,
                left: 5,
                textStyle: {
                  color: '#00F6FF',
                  fontSize: isScreen1920 ? 18 : 40
                }
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#57617B'
                  }
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLine: {
                  lineStyle: {
                    color: '#00c7ff'
                  }
                },
                data: data.map(v=>{
                  if (this.type === '年') {
                    return v.year + '年'
                  }
                  if (this.type === '月') {
                    return v.month + '月'
                  }
                  if (this.type === '日') {
                    return v.day + '日'
                  }
                })
              }],
              yAxis: [{
                type: 'value',
                axisTick: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    color: '#00c7ff'
                  }
                },
                axisLabel: {
                  margin: 10,
                  textStyle: {
                    fontSize: isScreen1920 ? 14 : 32,

                  }
                },
                splitLine: {
                  show: false
                }
              }],
              series: [{
                name: '数量',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                  normal: {
                    width: 1
                  }
                },
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: '#5ff6e9'
                    }, {
                      offset: 0.8,
                      color: '#7370fd'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                  }
                },
                itemStyle: {
                  normal: {
                    color: 'rgb(137,189,27)',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 12

                  }
                },
                data: data.map(v=>{
                  return v.count
                })
              }]
            };
            if (this.myChart) {
              this.myChart.dispose()
            }
            this.myChart = this.$echarts.init(document.getElementById('warning_num_echarts'))
            this.myChart.setOption(option)
          }
        },
        mounted() {
          this.initEcharts()
        }
    }
</script>
<style lang="stylus" scoped>
  .warning-num{
    pointer-events: auto;
    height: 100%;
    position: relative;
    .received-radio {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 1;
      /deep/ .el-radio-button__inner {
        background: transparent;
        color: white;
      }
    }
  }
  @media screen and (max-width: 1920px) {
      .num{
          font-size: 30px!important;

      }
  }
</style>
